<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div
      style="padding:20px"
      class="top"
    >
      <el-form
        ref="form"
        :model="formData"
        style="background:white;padding: 20px 30px"
      >
        <el-row
          type="flex"
          justify="space-between"
        >
          <el-col :span="7">
            <el-form-item
              label="订单编号："
              prop="id"
              label-width="28%"
            >
              <el-input
                v-model="formData.id"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="订单状态："
              prop="status"
              label-width="28%"
            >
              <el-select
                v-model="formData.status"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in orderstatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="付费状态："
              prop="paymentStatus"
              label-width="28%"
            >
              <el-select
                v-model="formData.paymentStatus"
                placeholder="请选择"
              >
                <el-option
                  label="未付"
                  :value="1"
                ></el-option>
                <el-option
                  label="已付"
                  :value="2"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
        >
          <el-col :span="7">
            <el-form-item
              label="发件人姓名："
              prop="senderName"
              label-width="28%"
            >
              <el-input
                v-model="formData.senderName"
                placeholder="请输入发件人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="发件人电话："
              prop="senderPhone"
              label-width="28%"
            >
              <el-input
                v-model="formData.senderPhone"
                placeholder="请输入发件人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              prop="senderProvinceId"
              label="发件人地址"
              label-width="28%"
            >
              <el-select
                v-model="formData.senderProvinceId"
                style="width:32%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Sprovinces"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
              <el-select
                v-model="formData.senderCityId"
                style="width:32%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Scitys"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
              <el-select
                v-model="formData.senderCountyId"
                style="width:32%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Sareas"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="space-between"
        >
          <el-col :span="7">
            <el-form-item
              prop="receiverName"
              label="收件人姓名："
              label-width="28%"
            >
              <el-input
                v-model="formData.receiverName"
                placeholder="请输入收件人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              prop="receiverPhone"
              label="收件人电话："
              label-width="28%"
            >
              <el-input
                v-model="formData.receiverPhone"
                placeholder="请输入收件人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              prop="receiverProvinceId"
              label="收件人地址："
              label-width="28%"
            >
              <el-select
                v-model="formData.receiverProvinceId"
                style="width:32%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Rprovinces"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
              <el-select
                v-model="formData.receiverCityId"
                style="width:32%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Rcitys"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
              <el-select
                v-model="formData.receiverCountyId"
                style="width:32%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in Rareas"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button
              style="background-color:rgb(225, 85, 54);color:white;width:90px;height:40px"
              @click="search"
            >搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <div
        class="bottom"
        style="margin-top:15px"
      >
        <el-table
          :data="list"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="100"
          >
            <template v-slot="{$index}">{{ (pageQuery.page-1)*pageQuery.pageSize+$index+1 }}</template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="订单编号"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="transportOrderId"
            width="150"
            label="运单编号"
          >
            <template #default="{row}">{{ row.transportOrder.id }}</template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="下单时间"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="订单状态"
            width="100"
          >
            <template #default="{row}">{{ status(row.status) }}</template>
          </el-table-column>
          <el-table-column
            prop="senderName"
            label="发件人姓名"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="senderPhone"
            label="发件人电话"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="senderPhone"
            label="发件人地址"
            width="180"
          >
            <template
              #default="{row}"
            >{{ row.senderProvince.name }} {{ row.senderCity.name }} {{ row.senderCounty.name }} {{ row.senderAddress }}</template>
          </el-table-column>
          <el-table-column
            prop="receiverName"
            label="收件人姓名"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="receiverPhone"
            label="收件人电话"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="receiverPhone"
            label="收件人地址"
            width="180"
          >
            <template
              #default="{row}"
            >{{ row.receiverProvince.name }} {{ row.receiverCity.name }} {{ row.receiverCounty.name }} {{ row.receiverAddress }}</template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="取件类型"
            width="100"
          >
            <template #default="{row}">{{ row.pickupType===1?'网点自寄':'上门取件' }}</template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="付费类型"
            width="100"
          >
            <template #default="{row}">{{ row.paymentMethod===1?'预结':'到付' }}</template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="付费状态"
            width="100"
          >
            <template #default="{row}">{{ row.paymentStatus===1?'未付':'已付' }}</template>
          </el-table-column>
          <el-table-column
            width="100"
            fixed="right"
            label="操作"
          >
            <template #default="{row}">
              <el-button
                type="text"
                @click="orderManage(row.id)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="height:70px;margin:0 20%"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageQuery.pageSize"
          background
          :current-page="pageQuery.page"
          layout="total,sizes,prev, pager,next,jumper "
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import provinces from '@/api/city'
import orderstatus from '@/api/orderstatus'
import { orderList } from '@/api/order'
export default {
  data() {
    return {
      formData: {
        id: null, // 订单编号
        status: null, // 订单状态
        paymentStatus: null, // 付费状态
        senderName: null, // 发件人姓名
        senderPhone: null, // 发件人电话
        senderAddress: null, // 发件人详细地址
        senderProvinceId: null, // 发件人省份id
        senderCityId: null, // 发件人城市id
        senderCountyId: null, // 发件人区域id
        receiverName: null, // 收件人姓名
        receiverPhone: null, // 收件人电话
        receiverAddress: null, // 收件人详细地址
        receiverProvinceId: null, // 收件人省份id
        receiverCityId: null, // 收件人城市id
        receiverCountyId: null // 收件人区域id
      },
      pageQuery: {
        page: 1, // 页码
        pageSize: 10 // 条数
      },
      Sprovinces: [], // 发件人省市区
      Scitys: [],
      Sareas: [],
      Rprovinces: [], // 取件人省市区
      Rcitys: [],
      Rareas: [],
      counts: null, // 总数
      list: [], // 订单列表数据
      orderstatus: [] // 订单状态
    }
  },

  watch: {
    // 侦听发件人省份的变化
    'formData.senderProvinceId'() {
      // 变化之后从所有数据中筛选与省份id对应的数据
      const data = this.Sprovinces.find(item => {
        // 用选中的id与数组中每项的id进行比较，符合条件返回该对象
        return item.areaId === this.formData.senderProvinceId
      })
      // 将该对象里的城市数据赋值给发件人的城市列表
      this.Scitys = data ? data.cities : []
      // 下面的是如果改变了省份，城市和地区先清空
      this.formData.senderCityId = null
      this.formData.senderCountyId = null
    },
    // 侦听发件人城市的变化
    /* 这里因为判断是选择省份之后，城市id清空，也会侦听到城市id的变化，会进行比较，
         因为id是null，所以返回的对象是空的， 在赋值的时候不判断会报错
      */
    'formData.senderCityId'() {
      // 变化之后从所有数据中筛选与城市id对应的数据
      const data = this.Scitys.find(item => {
        // 用选中的id与数组中每项的id进行比较，符合条件返回该对象
        return item.areaId === this.formData.senderCityId
      })
      // 将该对象里的地区数据赋值给发件人的地区列表
      this.Sareas = data ? data.counties : []
      // 如果改变了城市，地区先清空
      this.formData.senderCountyId = null
    },
    'formData.receiverProvinceId'() {
      const data = this.Rprovinces.find(item => {
        return item.areaId === this.formData.receiverProvinceId
      })
      // console.log(data)
      this.Rcitys = data ? data.cities : []
      this.formData.receiverCityId = null
      this.formData.receiverCountyId = null
    },
    'formData.receiverCityId'() {
      if (this.formData.receiverCityId) {
        const data = this.Rcitys.find(item => {
          return item.areaId === this.formData.receiverCityId
        })
        // console.log(data)
        this.Rareas = data ? data.counties : []
        this.formData.receiverCountyId = null
      }
    }
  },
  created() {
    this.Sprovinces = provinces
    this.Rprovinces = provinces
    this.orderstatus = orderstatus
    this.listInit()
  },
  methods: {
    // 搜索
    search() {
      this.pageQuery = {
        ...this.pageQuery,
        ...this.formData
      }
      this.listInit()
    },
    // 重置
    reset() {
      this.$refs.form.resetFields()
      this.Rareas = []
      this.pageQuery = {
        page: 1, // 页码
        pageSize: 5 // 条数
      }
      this.listInit()
    },
    // 初始化数据
    async listInit() {
      const { data } = await orderList(this.pageQuery)
      this.counts = +data.counts
      this.list = data.items
    },
    // 订单状态渲染
    status(value) {
      const data = orderstatus.filter(item => {
        return item.id === value
      })
      return data[0].name
    },
    // 分条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageQuery.pageSize = val
      this.listInit()
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageQuery.page = val
      this.listInit()
    },
    //
    orderManage(id) {
      this.$router.push({
        name: 'edit-order',
        query: {
          id
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
::v-deep .el-form-item__label {
  font-weight: 400 !important;
}
</style>
